<!DOCTYPE html>
<html>
<head>
  <style>
      div {
         width: 6cm;
         height: 3cm;
         border: 1px solid #004400;
         margin: 1em;    
      }
      .simple::before {
         content: attr(data-test-content);
      }
      .with-string-type::after {
         content: attr(data-test-content string);
      }
      .with-string-type-and-default::after {
         content: attr(data-test-content string, "default string");
      }
      .url::before {
         content: attr(data-test-content url);
      }
      a::before {
         content: "link to " attr(href);
      }
      
</style>
</head>
<body>
  <div class="simple" data-test-content="Text in a attribute"></div>
  <div class="with-string-type" data-test-content="Text in a attribute : with string type "></div>
  <div class="with-string-type-and-default"></div>
  <div class="url" data-test-content="./vivliostyle-logo.png"></div>  
  <div><a href="http://vivliostyle.com"></a></div>
</body>
</html>
